<template>
  <div class="visitor-notVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">餐厅名称:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.restaurantName" placeholder="请输入餐厅名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">设备组名称:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.deviceName" placeholder="请输入设备组名称" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">预警时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="btn-wrap">
        <a-button
          class="searchBtn"
          @click="searchQuery(queryParam.alarmTime_begin, queryParam.alarmTime_end)"
          type="primary"
        >
          搜索
        </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template slot="thickSmoke" slot-scope="records">
          <span
            :class="
              records.thickSmokeType == 1
                ? 'table-normal'
                : records.thickSmokeType == 2
                ? 'table-earlyWarning'
                : 'table-warming'
            "
          >
            {{ records.thickSmoke }}
            <!-- {{ records.thickSmokeType_dictText }} -->
          </span>
        </template>

        <template slot="particleHaze" slot-scope="records">
          <span
            :class="
              records.particleHazeType == 1
                ? 'table-normal'
                : records.particleHazeType == 2
                ? 'table-earlyWarning'
                : 'table-warming'
            "
          >
            {{ records.particleHaze }}
            <!-- {{ records.particleHazeType_dictText }} -->
          </span>
        </template>

        <template slot="nonMethane" slot-scope="records">
          <span
            :class="
              records.nonMethaneType == 1
                ? 'table-normal'
                : records.nonMethaneType == 2
                ? 'table-earlyWarning'
                : 'table-warming'
            "
          >
            {{ records.nonMethane }}
            <!-- {{ records.nonMethaneType_dictText }} -->
          </span>
        </template>

        <template slot="fanStatus" slot-scope="records">
          <img v-if="records.fanStatus == 1" src="@/assets/imgs/device/paifengji_on.png" alt="" />
          <img v-else src="@/assets/imgs/device/paifengji_off.png" alt="" />
          <span :class="records.fanStatus == 1 ? 'table-online' : 'table-offline'">
            {{ records.fanStatus == 1 ? '开启' : '关闭' }}
          </span>
        </template>

        <template slot="purifyStatus" slot-scope="records">
          <img v-if="records.purifyStatus == 1" src="@/assets/imgs/device/jingfengji_on.png" alt="" />
          <img v-else src="@/assets/imgs/device/jingfengji_off.png" alt="" />
          <span :class="records.purifyStatus == 1 ? 'table-online' : 'table-offline'">
            {{ records.purifyStatus == 1 ? '开启' : '关闭' }}
          </span>
        </template>

        <template v-slot:action="records">
          <span class="operation deatil-color" @click="detailHandle(records)">详情</span>
        </template>
      </a-table>
    </div>
    <detail-modal ref="detailModal"></detail-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import startEndTime from '@/components/startEndTime'
import detailModal from './modules/detailModal'
import { mapState } from 'vuex'
export default {
  name: 'visitor-notVisited',
  components: { startEndTime, detailModal },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  props: {
    reName: {
      type: String,
      default: '',
    },
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      this.searchQuery()
    },
  },

  data() {
    return {
      url: {
        list: '/device/event_record/page?type=1',
        tree: true,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属餐厅',
          dataIndex: 'restaurantName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '设备组名称',
          dataIndex: 'deviceName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '油烟(mg/m³)',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'thickSmoke' },
        },
        {
          title: '颗粒物(mg/m³)',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'particleHaze' },
        },
        {
          title: '非甲烷总烃(mg/m³)',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'nonMethane' },
        },
        {
          title: '排风机',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'fanStatus' },
        },
        {
          title: '净化器',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'purifyStatus' },
        },
        {
          title: '预警时间',
          dataIndex: 'alarmTime',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '监管单位',
          dataIndex: 'unitName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },

  methods: {
    eaHandle(v) {
      this.queryParam.restaurantName = v ? v : ''
      this.searchQuery()
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.alarmTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.alarmTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.alarmTime_begin = null
        this.queryParam.alarmTime_end = null
      }
    },
    detailHandle(records) {
      records.type = 1
      this.$refs.detailModal.show(records)
      // this.$router.push({ path: '/event/event/modules/detailModal', query: records })
    },
  },
}
</script>
<style lang="less" scoped>
.table-online {
  color: #0eff47;
}

.table-offline {
  color: #098d8d;
}

.table-normal {
  color: #5dd5d8;
}
.table-earlyWarning {
  color: #deef35;
}
.table-warming {
  color: #ff517b;
}
</style>
